<div data-role=page id=home style="background-color: #f0eff6">
	<div data-role=header data-theme=b>
		<h1>Mistake Chasing Game</h1>
		<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu">
			<h3 style="margin-left:-20%;">Actions</h3>
			<ul data-role="listview">
				<li data-icon="false"><a href="#">Home</a></li>
				<li data-icon="false"><a href="change_password.html">Change Password</a></li>
				<li data-icon="false"><a href="#">Game History</a></li>
				<li data-icon="false"><a href="#index.html">Logout</a></li>                        
			</ul>
		</div>
	</div>
	<div data-role=content >
		<img src="images/user_icon.png" style="margin:auto;display:block;background-color:#ffffff;border: 3px solid blue; box-shadow: 3px 5px 5px #888888;" />
		<p class="text">
			<span id="firstname">first name</span> <span id="lastname">last name</span>
		</p>
		<p class="text" style="font-size: 18px; color: #018cca; padding: 10px 0px 0px 0px; text-align: left;"> User Information </p>
		<div class="horizontalRule">
		</div>
		<table class="text text2">
			<tr>
				<td style="border:none">Email:</td>
				<td id="email"></td>
			</tr>
			<tr>
				<td>Age:</td>
				<td id="age"></td>
			</tr>
			<tr>
				<td>Best Score:</td>
				<td id="best_score"></td>
			</tr>
			<tr>
				<td>Last Play:</td>
				<td id="last_play"></td>
			</tr>
		</table>
		<p>
			<a href=gameplay.html data-role=button data-theme=e data-icon=check> START A SINGLEPLAYER GAME </a>
			<a href=register_multiplayer.html data-role=button data-theme=e data-icon=check> REGISTER FOR A MULTIPLAYER GAME</a>
		</p>
	</div>
	<div data-role=footer data-theme=b data-position="fixed">
		<h1>Mistake Chasing Game (c) 2013</h1>
	</div>
	<script type="text/javascript">
		var user_info = {
			email:sessionStorage.getItem("email"),
	        password:sessionStorage.getItem("password")
		};
		$.ajax({
		     url:"http://127.0.0.1:81/Game/home.php",
		     dataType: 'jsonp',
		     data: user_info,
		     success: function(json){
				 $("#email").text(json.email);
				 $("#age").text(json.age);
				 $("#firstname").text(json.firstname.toUpperCase());
				 $("#lastname").text(json.lastname.toUpperCase());
				 if (json.success == 5) {
					 $("#best_score").text(json.total_correct + "/" + 10);
					 $("#last_play").text(json.time);
				} else if (json.success == 6) {
					$("#best_score").text("N/A");
					$("#last_play").text("N/A");
				}
		     },
		     error:function(){
		         alert("Error");
		     }      
		});
</script>
</div>
